<template>
    <div :class="['toolbox-panel-wp', { 'is-hide':!toolbar.toolbox }]">
        <div class="toolbox-panel" flex="main:justify">
            <div flex>
                <div class="btn-box">参考线&nbsp;&nbsp;
                    <b-switch v-model="toolbox.referLine" size="small"></b-switch>
                </div>
                <div class="btn-box">对齐线&nbsp;&nbsp;
                    <b-switch v-model="toolbox.markLine" size="small"></b-switch>
                </div>
            </div>
            <div class="ctrl-box">&nbsp;&nbsp;
                <b-button size="mini" icon="expend" @click="toggle">{{!isFullscreen ? '全屏编辑' : '退出全屏'}}</b-button>
                <b-button size="mini" icon="clear" @click="clearCanvas">清空画布</b-button>
                <b-button size="mini" @click="undo">
                    <i class="action-btn b-iconfont b-icon-rollback"></i>
                    撤销
                </b-button>
                <b-button size="mini" @click="redo">
                    <i class="action-btn b-iconfont b-icon-rollback" style="transform: rotateY(180deg);"/>
                    重做
                </b-button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import useSchemaStore from '@/hooks/schema/useSchemaStore'
    import {MessageBox} from 'bin-ui-next'
    const {store, toolbar, toolbox} = useSchemaStore()
    import { useFullscreen } from '@vueuse/core'
    const { isFullscreen, enter, exit, toggle } = useFullscreen()
    const clearCanvas = () => {
        MessageBox.confirm({
            type: 'error',
            title: '确认清空画布吗？请谨慎操作！',
        }).then(() => {
            store.dispatch('schema/clearScreen')
        }).catch(() => {
        })
    }
    const undo = () => store.dispatch('schema/undo')
    const redo = () => store.dispatch('schema/redo')
</script>
